<template>
	<el-card shadow="never">
		<el-form
            :inline="true"
            :model="queryForm"
            @keyup.enter="onSearch()">
			<el-form-item>
				<el-input
                    v-model="queryForm.postCode"
                    placeholder="岗位编码"
                    clearable>
                </el-input>
			</el-form-item>
			<el-form-item>
				<el-input
                    v-model="queryForm.postName"
                    placeholder="岗位名称"
                    clearable>
                </el-input>
			</el-form-item>
			<el-form-item>
				<el-select
                    clearable
                    v-model="queryForm.status"                    
                    placeholder="状态"
                    style="width: 80px">
                    <el-option label="停用" value="0" />
                    <el-option label="正常" value="1" />
                </el-select>
			</el-form-item>
			<el-form-item>
				<el-button @click="onSearch()">查询</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="handlePost()">新增</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="danger" @click="deleteBatch()">删除</el-button>
			</el-form-item>
		</el-form>
        
		<el-table
            border
            v-loading="loading"
            :data="postList"
            style="width: 100%"
            @selection-change="selectPostId">
			<el-table-column
                type="selection"
                header-align="center"
                align="center"
                width="50">
            </el-table-column>
			<el-table-column
                prop="postCode"
                label="岗位编码"
                header-align="center"
                align="center">
            </el-table-column>
			<el-table-column
                prop="postName"
                label="岗位名称"
                header-align="center"
                align="center">
            </el-table-column>
			<el-table-column
                prop="sort"
                label="排序"
                header-align="center"
                align="center">
            </el-table-column>
			<el-table-column
                prop="status"
                label="状态"
                header-align="center"
                align="center">
                <template #default="scope">
                    {{ scope.row.status === 0? '停用' : '正常' }}
                </template>
            </el-table-column>
			<el-table-column
                label="操作"
                fixed="right"
                header-align="center"
                align="center" width="150">
				<template #default="scope">
					<el-button link type="primary" @click="handlePost(scope.row.id)">修改</el-button>
					<el-button link type="primary" @click="deleteBatch(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
        
        <div style="margin-top: 20px">
            <el-pagination
                layout="prev, pager, next"
                v-model:current-page="pagination.page"
                :page-size="pagination.limit"
                :total="pagination.total"
                @current-change="onPageChange"
                background
            >
            </el-pagination>
        </div>

        <!-- 新增/修改组件 -->
        <PostDlg ref="postDlgRef" @refresh="getPostPage" />
    </el-card>
</template>

<script setup>
import { reactive, ref, onMounted, computed } from 'vue'
import { postStore } from '@/store/post'
import { ElMessage, ElMessageBox } from 'element-plus'
import PostDlg from './post_dlg.vue'

const usePostStore = postStore()
// 直接从store获取数据
const postList = computed(
    () => usePostStore.postList
)
const pagination = computed(
    () => usePostStore.pagination
)

const loading = ref(false)
const queryForm = reactive({
    postCode: '',
    postName: '',
    status: ''
})

onMounted(() => {
    getPostPage()
})

const getPostPage = async() => {
    loading.value = true
    try {
        await usePostStore.getPostPage(queryForm)
    } catch (error) {
        console.error('获取岗位列表失败:', error)
    } finally {
        loading.value = false
    }
}  

const onSearch = () => {
    // 重置到第一页
    usePostStore.pagination.page = 1
    // 重新获取列表
    getPostPage()
} 

const onPageChange = (page) => {
    usePostStore.pagination.page = page
    getPostPage()
}

const postDlgRef = ref(null) // 新增/修改组件的引用
const handlePost = (id) => {
    if (id) {
        postDlgRef.value.init(id) // 修改模式
    } else {
        postDlgRef.value.init() // 新增模式
    }
}

const selectedIds = ref([]) // 存储选中ID
const selectPostId = (selection) => {
    selectedIds.value = selection.map(item => item.id)
}

const deleteBatch = async(key) => {
    const ids = key ? [key] : selectedIds.value
    if (ids.length === 0) {
      ElMessage.warning('请选择删除记录')
      return
    }

    try {
        const confirm = await ElMessageBox.confirm('确定进行删除操作?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        })
        
        if (confirm === 'confirm') {
            console.log('删除岗位ID:', ids)
            await usePostStore.deleteBatch(ids)
            ElMessage.success('删除成功')
            await getPostPage() // 刷新列表
        }
    } catch (error) {
        // 用户点击取消或关闭弹窗
        console.log('删除操作已取消')
        if(error !== 'cancel') { // 不是用户取消的情况
            ElMessage.error(error.message || '删除失败')
        }
    }
}
</script>

<style lang="scss" scoped>

</style>